<template>
  <el-card style="width: 100%;height: 50px;"><span style="font-size: 20px;"><b>会议室管理</b></span></el-card>
  <el-card style="width: 100%" shadow="always">
    <el-form :inline="true" :model="search" class="demo-form-inline">

      <el-form-item>
        <el-input v-model="search.DepartmentName" placeholder="请输入会议室名称" clearable />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
        <el-button type="primary" plain @click="">重置</el-button>
      </el-form-item>
    </el-form>
    <el-form :inline="true">
      <el-button type="primary" @click="AddMeetRoom">预约会议</el-button>
    </el-form>
    <el-table :data="tableData" border style="width: 100%;margin-top: 20px;">
      <el-table-column type="index" label="序号" />
      <el-table-column prop="name" label="会议时间" />
      <el-table-column prop="name" label="会议名称" />
      <el-table-column prop="name" label="会议状态">
        <template v-slot="scope">
          <span v-if="scope.row.status">未开始</span>
          <span v-else-if="scope.row.status">进行中</span>
          <span v-else="scope.row.status">已结束</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="智能会议室">
        <template v-slot="scope">
          <span v-if="scope.row.status">是</span>
          <span v-else>否</span>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="会议室管理员" />
      <el-table-column prop="name" label="会议室" />
      <el-table-column prop="name" label="使用人" />
      <el-table-column prop="name" label="会议主题" />
      <el-table-column prop="" label="操作">
        <template slot-scope="scope">
          <el-button type="primary" @click="">会议详情</el-button>
          <el-button type="success" @click="">修改会议</el-button>
          <el-button type="warning" @click="">会议纪要</el-button>
        </template>
      </el-table-column>
    </el-table>

    <Pagination :current-page="page.pageIndex" :page-size="page.pageSize" :total-count="page.totalCount"
      :total-page="page.totalPage" @size-change="handleSizeChange" @current-change="handleCurrentChange"
      style="display: flex;justify-content: right;">
    </Pagination>
  </el-card>

  <!-- 弹框 -->
  <el-dialog v-model="meetRoomDialog" :title=title width="700" align-center>
    <h3>基本信息</h3>
    <el-form ref="ruleFormRef" style="max-width: 100%" :model="ruleForm" :rules="rules" label-width="auto">
      <el-row>
        <el-col :span="12">
          <el-form-item label="会议模板" prop="name">
            <el-input v-model="ruleForm.name" placeholder="请选择会议模板" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="会议主题" prop="name">
            <el-input v-model="ruleForm.name" placeholder=" 请输入会议主题" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="会议地点" prop="region">
            <el-select v-model="ruleForm.region" placeholder="请选择会议地点">
              <el-option label="Zone one" value="shanghai" />
              <el-option label="Zone two" value="beijing" />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="主持人" prop="name">
            <el-input v-model="ruleForm.name" placeholder=" 主持人" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-form-item label="会议时间" prop="date1">
        <el-date-picker v-model="ruleForm.date1" type="dates" placeholder="会议日期" />
        <el-time-select v-model="ruleForm.date2" style="width: 130px;margin-left: 20px;" start="06:30" step="00:15"
          end="20:30" placeholder="开始时间" /><span>————</span>
        <el-time-select v-model="ruleForm.date2" style="width: 130px" start="06:30" step="00:15" end="22:30"
          placeholder="结束时间" />
      </el-form-item>
      <el-form-item label="会议参与人" prop="name">
        <el-input v-model="ruleForm.name" placeholder=" 参与人" />
      </el-form-item>
      <el-form-item label="会议内容" prop="desc">
        <el-input v-model="ruleForm.desc" type="textarea" placeholder="会议内容" />
      </el-form-item>

      <h3>会议设置</h3>
      <el-row>
        <el-col :span="12">
          <el-form-item label="会议签到" prop="name">
            <el-switch v-model="ruleForm.status1" size="large" inline-prompt active-text="是" inactive-text="否" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="会议口令" prop="name">
            <el-switch v-model="ruleForm.status2" size="large" inline-prompt active-text="开启" inactive-text="关闭" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row >
        <el-col :span="12">
        </el-col>
        <el-col :span="12" v-show="ruleForm.status2">
          <el-form-item>
            <el-input v-model="ruleForm.name" placeholder="自定义口令" style="width: 135px;margin-right: 10px;" />
            <el-button type="primary" @click="">随机生成</el-button>
            <el-button type="primary" @click="">复制口令</el-button>
          </el-form-item>
        </el-col>
      </el-row>
            <el-row>
        <el-col :span="12">
          <el-form-item label="短信通知" prop="name">
            <el-switch v-model="ruleForm.status3" size="large" inline-prompt active-text="是" inactive-text="否" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="是否远程会议" prop="name">
            <el-switch v-model="ruleForm.status4" size="large" inline-prompt active-text="开启" inactive-text="关闭" />
          </el-form-item>
        </el-col>
      </el-row>

    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="submitForm(ruleFormRef)">保存</el-button>
        <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        <el-button @click="meetRoomDialog = false">关闭</el-button>
      </div>
    </template>
  </el-dialog>





</template>
<script lang="ts" setup>
import { reactive, ref } from 'vue'
import Pagination from '@/components/Pagination.vue'
import type { FormInstance, FormRules } from 'element-plus'



//#region 弹框相关
//标题
const title = ref('')
const meetRoomDialog = ref(false)
//新增打开弹框
const AddMeetRoom = () => {
  title.value = '会议预约'
  meetRoomDialog.value = true
}

//修改打开弹框
const EditMeetRoom = (row: any) => {
  title.value = '修改会议室'
  meetRoomDialog.value = true
}

const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  name: '',
  region: '',
  count: '',
  date1: '',
  date2: '',
  delivery: false,
  location: '',
  type: [],
  resource: '',
  desc: '',
  status1: false,
  status2: false,
  status3: false,
  status4: false,
})
// 表单验证规则
const rules = reactive<FormRules>({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  region: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'change',
    },
  ],
  count: [
    {
      required: true,
      message: 'Please select Activity count',
      trigger: 'change',
    },
  ],
  date1: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a date',
      trigger: 'change',
    },
  ],
  date2: [
    {
      type: 'date',
      required: true,
      message: 'Please pick a time',
      trigger: 'change',
    },
  ],
  location: [
    {
      required: true,
      message: 'Please select a location',
      trigger: 'change',
    },
  ],
  type: [
    {
      type: 'array',
      required: true,
      message: 'Please select at least one activity type',
      trigger: 'change',
    },
  ],
  resource: [
    {
      required: true,
      message: 'Please select activity resource',
      trigger: 'change',
    },
  ],
  desc: [
    { required: true, message: 'Please input activity form', trigger: 'blur' },
  ],
})
//添加/修改
const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid, fields) => {
    if (valid) {
      console.log('submit!')
    } else {
      console.log('error submit!', fields)
    }
  })
}
//重置表单
const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}



//#endregion


//查询条件
const search = reactive({
  DepartmentName: '',
})
//数据展示
const tableData = ref([])

//#region  分页相关
const page = reactive({
  pageIndex: 1,
  pageSize: 10,
  totalCount: 0,
  totalPage: 0
})
const handleSizeChange = (val: number) => {
  page.pageSize = val
}
const handleCurrentChange = (val: number) => {
  page.pageIndex = val
}

//#endregion

const onSubmit = () => {
  console.log('submit!')
}
</script>

<!-- 查询css 样式 -->
<style>
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>